<template>
  <!-- 地图容器 -->
  <div id="map" class="map__x" ref="mapOL">
    <div class="coordinate" style="z-index: 9">
      {{ coordinate[0] }}&nbsp;&nbsp; {{ coordinate[1] }} 米
      <!-- <i class="iconfont">&#xe60a;</i> -->
    </div>
  </div>
  <!-- 卷帘工具 -->
  <div id="line" v-show="showRoller"></div>
  <!-- 线弹窗内容 -->
  <div ref="mappopupCom" class="popup">
    <!-- 线弹窗内容 检测信息挂在探测上 -->
    <div class="buffer">
      <div class="contentPane">
        <div class="table_html">
          <table
            cellspacing="0"
            cellpadding="0"
            border="0"
            style="width: 300px"
          >
            <tbody>
              <!-- 表头 -->
              <div>
                <div class="first_line">
                  <div>详细信息</div>
                  <div class="titleButton close" @click="closePopup">×</div>
                </div>
                <div class="dotted_line">
                  <div class="second_line">
                    <div :class="picColor" @click="openPic">
                      {{ detailForm.pic }}
                    </div>
                    <div :class="reportColor" @click="openReport">
                      {{ detailForm.report }}
                    </div>
                    <div :class="videoColor" @click="openVideo">
                      {{ detailForm.video }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 清单内容 -->
              <div class="list_box">
                <tr>
                  <td style="width: 81px">
                    <b>{{ popFormName.startId }}</b>
                  </td>
                  <td>{{ popForm.startId }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.endId }}</b>
                  </td>
                  <td>{{ popForm.endId }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.material }}</b>
                  </td>
                  <td>{{ popForm.material }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.caliber }}</b>
                  </td>
                  <td>{{ popForm.caliber }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.spec }}</b>
                  </td>
                  <td>{{ popForm.spec }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.startBurialDepth }}</b>
                  </td>
                  <td>
                    {{ popForm.startBurialDepth }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.endBurialDepth }}</b>
                  </td>
                  <td>
                    {{ popForm.endBurialDepth }}
                  </td>
                </tr>

                <tr>
                  <td>
                    <b>{{ popFormName.startInvertElevation }}</b>
                  </td>
                  <td>
                    {{ popForm.startInvertElevation }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.endInvertElevation }}</b>
                  </td>
                  <td>
                    {{ popForm.endInvertElevation }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.pipeType }}</b>
                  </td>
                  <td>{{ popForm.pipeType }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.location }}</b>
                  </td>
                  <td>{{ popForm.location }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.probeUnit }}</b>
                  </td>
                  <td>{{ popForm.probeUnit }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.probeDate }}</b>
                  </td>
                  <td>{{ popForm.probeDate }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.ascription }}</b>
                  </td>
                  <td>{{ popForm.ascription }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.burialType }}</b>
                  </td>
                  <td>{{ popForm.burialType }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.flowDirection }}</b>
                  </td>
                  <td>
                    {{ popForm.flowDirection }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.buildYear }}</b>
                  </td>
                  <td>{{ popForm.buildYear }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.isUnderPressure }}</b>
                  </td>
                  <td>
                    {{ popForm.isUnderPressure }}
                  </td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.remark }}</b>
                  </td>
                  <td>{{ popForm.remark }}</td>
                </tr>
                <tr>
                  <td>
                    <b>{{ popFormName.tag }}</b>
                  </td>
                  <td>{{ popForm.tag }}</td>
                </tr>
              </div>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <!--  线弹窗探测挂检测-->
  <div class="picPop">
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value6"
      width="650"
      height="500"
    >
      <template #title>
        <div style="font-size: 22px">图片</div>
      </template>
      <template #default>
        <div class="guild_img_box">
          <div v-show="single">
            <img v-viewer :src="testPhotoUrl" alt="" style="width: 100%" />
          </div>
          <div v-show="poly" class="poly">
            <el-carousel>
              <el-carousel-item v-for="item in images" :key="item.id">
                <img
                  :src="item.originalUrl + item.pic"
                  class="bannerimg"
                  style="width: 100%"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value7"
      width="800"
      height="600"
    >
      <template #title>
        <div style="font-size: 22px">报告</div>
      </template>
      <template #default>
        <div class="testReport" style="padding: 0 0 20px 20px">
          <iframe :src="testReportUrl" width="85%" height="100%">
            该浏览器无法支持PDF,请点击查看：
            <a :href="testReportUrl">下载 PDF</a>
          </iframe>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal
      :mask="false"
      :lock-view="false"
      v-model="demo1.value8"
      width="800"
      height="500"
      @close="handleVideoX"
    >
      <template #title>
        <div>
          <span style="margin-right: 25px; margin-left: 15px">视频</span>
          <!-- 下拉菜单 -->
          <el-select
            v-model="movieValue"
            class="m-2"
            placeholder="下拉视频"
            @change="movieChange"
          >
            <el-option
              v-for="item in movieOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </template>
      <template #default>
        <!-- <div style="width: 100%; height: 100%"> -->
        <video
          autoplay
          controls
          style="width: 770px; height: 424px"
          :src="testVideoUrl"
          id="video1"
        ></video>
        <!-- </div> -->
      </template>
    </vxe-modal>
  </div>
  <!-- 点弹窗内容 -->
  <div ref="mappopupComPoint">
    <div class="bufferPoint">
      <div class="contentPanePoint">
        <div class="table_html">
          <table>
            <tbody>
              <!-- 表头 -->
              <div>
                <div class="first_line">
                  <div>详细信息</div>
                  <div class="titleButton close" @click="closePopupPoint">
                    ×
                  </div>
                </div>
              </div>
              <div class="list_box">
                <tr>
                  <td class="td"><b>要素编码:</b></td>
                  <td>{{ popFormPoint.featId }}</td>
                </tr>
                <tr>
                  <td><b>x:</b></td>
                  <td>{{ popFormPoint.x }}</td>
                </tr>
                <tr>
                  <td><b>y:</b></td>
                  <td>{{ popFormPoint.y }}</td>
                </tr>
                <tr>
                  <td><b>类别名称:</b></td>
                  <td>{{ popFormPoint.type }}</td>
                </tr>
                <tr>
                  <td><b>地面标高:</b></td>
                  <td>
                    {{ popFormPoint.groundElevation }}
                  </td>
                </tr>
                <tr>
                  <td><b>口径:</b></td>
                  <td>{{ popFormPoint.caliber }}</td>
                </tr>
                <tr>
                  <td><b>井深:</b></td>
                  <td>
                    {{ popFormPoint.manholeDepth }}
                  </td>
                </tr>
                <tr>
                  <td><b>埋深:</b></td>
                  <td>
                    {{ popFormPoint.burialDepth }}
                  </td>
                </tr>
                <tr>
                  <td><b>规格:</b></td>
                  <td>{{ popFormPoint.spec }}</td>
                </tr>
                <tr>
                  <td><b>井盖材质:</b></td>
                  <td>
                    {{ popFormPoint.manholeCoverMaterial }}
                  </td>
                </tr>
                <tr>
                  <td><b>井盖形状:</b></td>
                  <td>
                    {{ popFormPoint.manholeCoverShape }}
                  </td>
                </tr>
                <tr>
                  <td><b>井盖尺寸:</b></td>
                  <td>
                    {{ popFormPoint.manholeCoverSize }}
                  </td>
                </tr>
                <tr>
                  <td><b>探测单位:</b></td>
                  <td>
                    {{ popFormPoint.probeUnit }}
                  </td>
                </tr>
                <tr>
                  <td><b>探测日期:</b></td>
                  <td>
                    {{ popFormPoint.probeDate }}
                  </td>
                </tr>
                <tr>
                  <td><b>探测位置:</b></td>
                  <td>
                    {{ popFormPoint.location }}
                  </td>
                </tr>
                <tr>
                  <td><b>归属:</b></td>
                  <td>
                    {{ popFormPoint.ascription }}
                  </td>
                </tr>
                <tr>
                  <td><b>备注:</b></td>
                  <td>{{ popFormPoint.remark }}</td>
                </tr>
                <tr>
                  <td><b>标识:</b></td>
                  <td>{{ popFormPoint.tag }}</td>
                </tr>
              </div>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="module">
const mapUrlXX = await getMapInfo().then((res) => res.data)
</script>

<script setup>
import axios from 'axios'
import {
  ref,
  onMounted,
  onBeforeMount,
  reactive,
  watch,
  toRaw,
  onUpdated,
} from 'vue'
import { Map } from 'ol'
import View from 'ol/View.js'
import ScaleLine from 'ol/control/ScaleLine'
import 'ol/ol.css'
import { mapUrl } from '@/store/map'
import Tile from 'ol/layer/Tile'
import { Stroke, Style, Circle, Fill } from 'ol/style'
// import { resolutions, myProjection, params } from './mapHooks/ArcGisMap'
import { myProjection, params } from './mapHooks/ArcGisMap'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import Feature from 'ol/Feature.js'
import LineString from 'ol/geom/LineString.js'
import Overlay from 'ol/Overlay' // 引入覆盖物模块
import Text from 'ol/style/Text.js'
import {
  BaseMap,
  BaseTDT,
  BaseTDTGJ,
  ImageMap,
  ImgTDTGJ,
  WebMap,
  TopographyMap,
  ZT_YXGW_YS,
  ImgTDT,
  ImgGeo,
  topoLayer,
  HJMap,
} from './mapHooks/ArcGisMap'
// import Select from 'ant-design-vue/lib/vc-select'
import Select from 'ol/interaction/Select.js'
import * as turf from '@turf/turf' //引入turf做buffer缓冲区分析
import * as format from 'ol/format'
import Polygon from 'ol/geom/Polygon.js'
import GeoJSON from 'ol/format/GeoJSON.js'
import { message } from 'ant-design-vue'
import Point from 'ol/geom/Point.js'
import { composeCssTransform } from 'ol/transform'
import { defaults as defaultControls } from 'ol/control'
import { transform } from 'ol/proj'
import * as olExtent from 'ol/extent'
import { getBottomLeft } from 'ol/extent'
import Icon from 'ol/style/Icon.js'
import { IconImage } from 'ol/style'
import { feature } from '@turf/turf'
import { Source } from 'ol/source'
import { require } from '@/utils/require'
import {
  getSgServer,
  getPipeInfo,
  getPipePointInfo,
  getJCTC,
  getXFSearch,
  getJCGLSearch,
  getMapInfo,
} from '@/api/index'
//使用mitt进行任意组件通信
import emitter from '@/utils/bus'
//测试用菠萝存储地图容器
import { userMap, mapStyle, popValue, switchList13 } from '@/store/index'
import { GEOJSON_CONST } from '@/assets/data/resource.js'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
// 引入饿了么UI
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
//基础图层
function debounce(fn, wait) {
  let timeout, result
  return function () {
    const context = this
    const args = arguments
    clearTimeout(timeout)
    const callNow = !timeout
    timeout = setTimeout(function () {
      timeout = null
    }, wait)
    if (callNow) result = fn.apply(context, args)
    return result
  }
}
function throttle(fn, delay) {
  let valid = true
  return function () {
    if (valid) {
      setTimeout(() => {
        fn.apply(this, arguments)
        valid = true
      }, delay)
      valid = false
    }
  }
}
let HJLayer = HJMap()
// const baseMap = BaseTDT()
// const baseMapGJ = BaseTDTGJ()
// const baseMap = BaseMap()
// const imgMap = ImgTDT()
// const imgMapGJ = ImgTDTGJ()
let baseMap
let baseMapGJ
let imgMap
let imgMapGJ
let imgMap2
let imgMapGJ2
let resolutions
const imgGeo = ImgGeo()
const webMap = WebMap()
const topographyMap = topoLayer()
const zt_YXGW_YS = ZT_YXGW_YS()
const store = mapUrl()

// 其他配置
const mappopupCom = ref(null) // 弹窗容器(线)
const currentCoordinate = ref('') // 弹窗信息(线)
const mappopupComPoint = ref(null) // 弹窗容器(点)
const currentCoordinatePoint = ref('') // 弹窗信息(点)
const position = ref(null) //点击的坐标位置
const mapScale = ref(0) //比例尺大小
const Level = ref(null) //管网等级
const bufferArr = ref(null) //缓冲区数组
const CubeArr = ref(null) //管网服务数组
const rotation = ref(null) //判断流向正负
const leftTopX = ref(null)
const leftTopY = ref(null)
const rightBottomX = ref(null)
const rightBottomY = ref(null)
const buffersourceArr = ref(null)
const pointX = ref(null)
const pointY = ref(null)
const popValueFeat = ref(null)
let map
let buffersource
let bufferLayer
let olBuffer
let PointXsource
let PointXFeature
let PointYsource
let PointYFeature
let SinglePointsource
let SinglePointfeature
let overlay // 覆盖物实例(线要素弹窗)
let overlayPoint //覆盖物实例(点要素弹窗)
let coordinate = ref('00')
let mapOL = ref(null) //获取地图容器样式
let imgOL = ref(null) //获取天地图地图容器样式
let map_TDT
let imgLayer
let geoLayer

// 弹窗头
let detailForm = reactive({
  pic: '检测图片',
  report: '检测报告',
  video: '检测视频',
})
// 弹窗属性名
let popFormName = reactive({
  startId: '起点ID', //起点ID
  endId: '终点ID', //终点ID
  material: '材质', //材质
  caliber: '口径', //口径
  spec: '规格', //规格
  startBurialDepth: '起点埋深', //起点埋深
  endBurialDepth: '终点埋深', //终点埋深
  startInvertElevation: '起点内底标高', //起点内底标高
  endInvertElevation: '终点内底标高', //终点内底标高
  pipeType: '管网类型', //管网类型
  location: '探测位置', //探测位置
  probeUnit: '探测单位', //探测单位
  probeDate: '探测日期', //探测日期
  ascription: '归属', //归属
  burialType: '埋设方式', //埋设方式
  flowDirection: '流向', //流向
  buildYear: '建造年代', //建造年代
  isUnderPressure: '是否有压', //是否有压
  remark: '备注', //备注
  tag: '标识', //标识
})
// 弹窗属性值
let popForm = reactive({
  startId: '', //起点ID
  endId: '', //终点ID
  material: '', //材质
  caliber: '', //口径
  spec: '', //规格
  startBurialDepth: '', //起点埋深
  endBurialDepth: '', //终点埋深
  startInvertElevation: '', //起点内底标高
  endInvertElevation: '', //终点内底标高
  pipeType: '', //管网类型
  location: '', //探测位置
  probeUnit: null, //探测单位
  probeDate: '', //探测日期
  ascription: '', //归属
  burialType: '', //埋设方式
  flowDirection: 1, //流向
  buildYear: '', //建造年代
  isUnderPressure: '', //是否有压
  remark: '', //备注
  tag: '', //标识
})
let popFormPoint = reactive({
  featId: '', //要素编码
  x: '',
  y: '',
  type: '', //类别名称
  groundElevation: '', //地面标高
  caliber: null, //口径
  manholeDepth: '', //井深
  burialDepth: null, //埋深
  spec: null, //规格
  manholeCoverMaterial: '', //井盖材质
  manholeCoverShape: '', //井盖形状
  manholeCoverSize: '', //井盖尺寸
  probeUnit: '', //探测单位
  probeDate: '', //探测日期
  location: '', //探测位置
  ascription: '', //归属
  remark: null, //备注
  tag: '', //标识
})
const longitude = ref(null)
const latitude = ref(null)
//加载图层
let storeMap = userMap() //接收
let storeStyle = mapStyle()
let storePop = popValue() //接收map.vue弹窗内容
let pointAt
let lineAt
let SGLayer
let SGSource
const initMap = () => {
  if (mapUrlXX != null) {
    console.log('底图地址', mapUrlXX)
    if (mapUrlXX[0].token != 'null') {
      // 判断底图来源--天地图
      vecURL.value = mapUrlXX[0].mapUrl
      imgURL.value = mapUrlXX[1].mapUrl
      cvaURL.value = mapUrlXX[2].mapUrl
      ciaURL.value = mapUrlXX[3].mapUrl
      // resolutions = [
      //   79.37515875031751, 39.687579375158755, 21.166709000084669,
      //   10.583354500042335, 5.2916772500211673, 2.6458386250105836,
      //   1.3229193125052918, 0.52916772500211673,
      //   // 限制最大缩放级别:0.26458386250105836,0.13229193125052918, 0.066145965625264591,
      // ]
      resolutions = [
        79.37515875031751, 39.687579375158755, 21.16670900008467,
        10.583354500042335, 5.291677250021167, 2.6458386250105836,
        1.3229193125052918, 0.5291677250021167,
      ]
    } else {
      // arcgis切片
      vecURL.value = BaseMap()
      imgURL.value = ImageMap()
      console.log('arcgis切片')
      resolutions = [
        79.37515875031751, 39.687579375158755, 21.166709000084669,
        10.583354500042335, 5.2916772500211673, 2.6458386250105836,
        1.3229193125052918, 0.52916772500211673, 0.26458386250105836,
        0.13229193125052918, 0.066145965625264591,
      ]
    }
  } else {
    console.log('错误')
  }

  // 矢量
  baseMap = new Tile({
    title: 'tdtsl',
    className: 'myTdt',
    source: new XYZ({
      crossOrigin: 'anonymous',
      url: vecURL.value,
    }),
    type: 'overlay',
  })
  // 影像
  imgMap = new Tile({
    title: 'tdtyx',
    className: 'myTdt',
    source: new XYZ({
      crossOrigin: 'anonymous',
      url: imgURL.value,
    }),
    type: 'overlay',
  })
  // 矢量注记
  baseMapGJ = new Tile({
    className: 'myTdt',
    source: new XYZ({
      crossOrigin: 'anonymous',
      url: cvaURL.value,
    }),
    type: 'overlay',
  })
  // 影像注记
  imgMapGJ = new Tile({
    className: 'myTdt',
    title: 'tdtyxGJ',
    source: new XYZ({
      crossOrigin: 'anonymous',
      url: ciaURL.value,
    }),
    type: 'overlay',
  })
  // 影像一半
  imgMap2 = new Tile({
    title: 'tdtyx2',
    className: 'myTdt',
    source: new XYZ({
      crossOrigin: 'anonymous',
      url: imgURL.value,
    }),
    type: 'overlay',
  })
  // 影像注记一半
  imgMapGJ2 = new Tile({
    className: 'myTdt',
    title: 'tdtyxGJ',
    source: new XYZ({
      crossOrigin: 'anonymous',
      url: ciaURL.value,
    }),
    type: 'overlay',
  })
  map = new Map({
    target: 'map',
    // layers: [baseMap, imgMap, baseMapGJ, imgMapGJ, zt_YXGW_YS, imgMap2],
    layers: [
      baseMap,
      imgMap,
      baseMapGJ,
      imgMapGJ,
      zt_YXGW_YS,
      imgMap2,
      imgMapGJ2,
    ],
    view: new View({
      projection: myProjection,
      center: [24632, 65000],
      resolution: 79.37515875031751,
      resolutions: resolutions,
      // extent: fullExtent,
      constrainResolution: true, //使缩放级别变为整数
    }),
    //加载控件到地图容器中
    controls: defaultControls({
      zoom: false,
      rotate: false,
      attribution: false,
    }),
    pixelRatio:
      typeof window.devicePixelRatio !== 'undefined'
        ? window.devicePixelRatio
        : 1,
  })
  /* 卷帘显隐 */
  imgMap2.setVisible(false)
  imgMapGJ2.setVisible(false)
  storeMap.map = map //修改pinia里面的数据
  geoLayer = new VectorLayer({
    // zIndex: 9999,
    title: 'GeoJSON',
    source: new VectorSource({
      features: new GeoJSON().readFeatures(GEOJSON_CONST),
    }),
    style: new Style({
      stroke: new Stroke({
        color: '#6d62ff',
        width: 5,
      }),
    }),
  })
  map.addLayer(geoLayer)
  // 缓冲区图层
  buffersource = new VectorSource({
    wrapX: false,
  })
  bufferLayer = new VectorLayer({
    title: 'bufferLayer',
    source: buffersource,
    className: 'myTitle',
    // 线样式写成数组可以给线加边框
    style: [
      new Style({
        stroke: new Stroke({
          color: '#0bebe5',
          width: 7,
          zIndex: 0,
        }),
      }),
      new Style({
        stroke: new Stroke({
          color: `#03fcfc`,
          width: 5,
          zIndex: 1,
        }),
      }),
    ],
  })
  map.addLayer(bufferLayer)

  // 线要素的起点图层
  PointXsource = new VectorSource({
    wrapX: false,
  })
  const PointXLayer = new VectorLayer({
    source: PointXsource,
    zIndex: 999,
    // style: new Style({
    //   image: new Circle({
    //     radius: 5,
    //     fill: new Fill({
    //       color: [0, 0, 0, 1],
    //     }),
    //   }),
    // }),
  })
  map.addLayer(PointXLayer)
  // 线要素的终点图层
  PointYsource = new VectorSource({
    wrapX: false,
  })
  const PointYLayer = new VectorLayer({
    source: PointYsource,
    zIndex: 999,
    // style: new Style({
    //   image: new Circle({
    //     radius: 5,
    //     fill: new Fill({
    //       color: [0, 255, 0, 1],
    //     }),
    //     stroke: new Stroke({
    //       color: [255, 165, 0, 1],
    //       width: 2.5,
    //     }),
    //   }),
    //   text: new Text({
    //     font: '15px A_QiChengINFO  ',
    //     text: '\u0029',
    //     scale: 2,
    //     fill: new Fill({
    //       color: 'rgba(255,165,0,1)',
    //     }),
    //   }),
    // }),
  })
  map.addLayer(PointYLayer)
  /* 卷帘特效 */
  setTimeout(() => {
    updateMapExtent({
      x: window.document.documentElement.clientWidth / 2,
      y: 0,
    })
  })
}
/* 卷帘特效 */
let storeRoller = switchList13()
let changeRoller
const showRoller = ref(false)
const lineStyle = ref(0)
const lineLongth = ref(0)
watch(storeRoller, () => {
  changeRoller = toRaw(storeRoller.queryBtn)
  lineLongth.value = window.document.documentElement.clientWidth / 2
  if (changeRoller == true) {
    showRoller.value = true
    document.getElementById('line').style.left = lineLongth.value
    /*  绑定卷帘轴监听事件 */
    bindMoveEvent()
    imgMap2.setVisible(true)
    imgMapGJ2.setVisible(true)
  } else {
    showRoller.value = false
    // map.getView().un('change:resolution', function () {
    //   console.log('解除监听')
    // })
    imgMap2.setVisible(false)
    imgMapGJ2.setVisible(false)
  }
})

const updateMapExtent = (windowPostion) => {
  // 将屏幕坐标 转换为 地图坐标
  let pos = map.getCoordinateFromPixel([windowPostion.x, windowPostion.y])
  // 修改第二个地图的范围
  imgMap2.setExtent([-90000, -90000, pos[0], pos[1]])
  imgMapGJ2.setExtent([-90000, -90000, pos[0], pos[1]])
  // imgMap2.setExtent([0, 0, pos[0], pos[1]])
}
const bindMoveEvent = () => {
  var one = document.getElementById('line')
  one.addEventListener('mousedown', function (e) {
    function move(e) {
      document.getElementById('line').style.left = e.x - 4 + 'px'
      lineStyle.value = document.getElementById('line').style.left
      lineLongth.value = e.x
      updateMapExtent({
        x: e.x,
        y: 0,
      })
    }
    window.document.addEventListener('mousemove', move)
    window.document.addEventListener('mouseup', function (e) {
      window.document.removeEventListener('mousemove', move)
    })
  })
  // window.addEventListener('mouseup', function (e) {
  //   document.getElementById('line').style.left = e.x - 4 + 'px'
  //   lineStyle.value = document.getElementById('line').style.left
  //   lineLongth.value = e.x
  //   updateMapExtent({
  //     x: e.x,
  //     y: 0,
  //   })
  // })
  map.getView().on('change:resolution', function (e) {
    console.log(88888)
    updateMapExtent({
      x: toRaw(lineLongth.value),
      y: 0,
    })
  })
}
// 改变地图容器大小
const showChange = ref(false)
const changeContainer = () => {
  if (showChange.value == true) {
    console.log(222)
    showChange.value = false
    mapOL.value.style.width = '100vw'
    mapOL.value.style.position = 'fixed'
    mapOL.value.style.right = '0px'
    map.getView().setCenter([24632, 69653])
  } else {
    console.log(111)
    mapOL.value.style.width = '50vw'
    mapOL.value.style.position = 'fixed'
    mapOL.value.style.right = '0px'
    showChange.value = true
    map.getView().setCenter([70000, 69653]) //偏移视窗,使小地图居中
  }

  // console.log(mapOL.value.style.width)
}
// 点击以后再实现弹窗实例
const addOverlay = () => {
  // 创建弹窗实例(线)
  overlay = new Overlay({
    element: mappopupCom.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    positioning: 'center-center',
    autoPanAnimation: {
      // 底图移动动画
      duration: 250,
    },
  })
  map.addOverlay(overlay)
  overlayPoint = new Overlay({
    element: mappopupComPoint.value, // 弹窗标签，在html里
    autoPan: true, // 如果弹窗在底图边缘时，底图会移动
    positioning: 'center-center',
    autoPanAnimation: {
      // 底图移动动画
      duration: 250,
    },
  })
  map.addOverlay(overlayPoint)
  // console.log('图层', map.getLayers())
}
//比例尺
const scaleLineControl = new ScaleLine({
  units: 'metric',
  target: document.getElementById('scale'), // 显示比例尺的Dom
  bar: true,
  text: true,
})
const vecURL = ref()
const imgURL = ref()
const cvaURL = ref()
const ciaURL = ref()
onMounted(() => {
  initMap()
  // 切换地图
  baseMap.setVisible(true)
  baseMapGJ.setVisible(true)
  imgMap.setVisible(false)
  imgMapGJ.setVisible(false)
  emitter.on('changeMap', (res) => {
    console.log(res, 'res')
    baseMap.setVisible(res.BaseMap)
    baseMapGJ.setVisible(res.BaseMapGJ)
    imgMap.setVisible(res.ImageMap)
    imgMapGJ.setVisible(res.ImageMapGJ)
  })
  // console.log('地图容器样式', mapOL.value)
  // 将地图容器的样式保存进pinia
  storeStyle.map_style = mapOL.value
  initMapHandle()
  addOverlay()
  //监听表格传来的mitt经纬度
  emitter.on('longitudeAlatitude', (msg) => {
    // console.log('传过来的经纬度', msg.longitude)
    longitude.value = msg.longitude
    latitude.value = msg.latitude
  })

  // WatchScrolling()
  map.addControl(scaleLineControl)
  emitter.on('changeMap', (res) => {
    console.log(res, 'res')
    baseMap.setVisible(res.BaseMap)
    baseMapGJ.setVisible(res.BaseMapGJ)
    imgMap.setVisible(res.ImageMap)
    imgMapGJ.setVisible(res.ImageMapGJ)
  })
  map.on('pointermove', (e) => {
    const a19 = e.coordinate
    const str1 = a19[0].toFixed(2)
    const str2 = a19[1].toFixed(2)
    const a20 = [str1, str2]
    coordinate.value = a20 // 保存坐标点小数点后两位
    // console.log('打印坐标点', a20)
  })
})
// 在别的组件飞行时打开弹窗
watch(storePop, () => {
  // 更新点弹窗内容
  pointAt = toRaw(storePop.pointValue)
  lineAt = toRaw(storePop.lineValue)
  if (typeof pointAt == 'object') {
    // 若为对象进入
    console.log('获取空间查询点信息', pointAt)
    popFormPoint.featId = pointAt.featId
    popFormPoint.x = pointAt.x
    popFormPoint.y = pointAt.y
    popFormPoint.type = pointAt.type
    popFormPoint.groundElevation = pointAt.groundElevation.toFixed(2) + 'm'
    if (pointAt.caliber != null) {
      popFormPoint.caliber = pointAt.caliber.toFixed(2) + 'm'
    } else {
      popFormPoint.caliber = ''
    }
    if (pointAt.manholeDepth != null) {
      popFormPoint.manholeDepth = pointAt.manholeDepth.toFixed(2) + 'm'
    } else {
      popFormPoint.manholeDepth = ''
    }
    if (pointAt.burialDepth != null) {
      popFormPoint.burialDepth = pointAt.burialDepth.toFixed(2) + 'm'
    } else {
      popFormPoint.burialDepth = ''
    }
    popFormPoint.spec = pointAt.spec
    popFormPoint.manholeCoverMaterial = pointAt.manholeCoverMaterial
    popFormPoint.manholeCoverShape = pointAt.manholeCoverShape
    popFormPoint.manholeCoverSize = pointAt.manholeCoverSize
    popFormPoint.probeUnit = pointAt.probeUnit
    popFormPoint.probeDate = pointAt.probeDate
    popFormPoint.location = pointAt.location
    popFormPoint.ascription = pointAt.ascription
    popFormPoint.remark = pointAt.remark
    popFormPoint.tag = pointAt.tag
  }
  if (typeof lineAt == 'object') {
    // 若为对象进入
    // console.log('获取空间查询线信息', lineAt)
    popForm.startId = lineAt.startId
    popForm.endId = lineAt.endId
    TCFeatId.value = lineAt.startId + '-' + lineAt.endId
    popForm.material = lineAt.material
    popForm.caliber = lineAt.caliber
    popForm.spec = lineAt.spec
    if (lineAt.startBurialDepth != null) {
      popForm.startBurialDepth = lineAt.startBurialDepth.toFixed(2) + 'm'
    } else {
      popForm.startBurialDepth = lineAt.startBurialDepth
    }
    if (lineAt.endBurialDepth != null) {
      popForm.endBurialDepth = lineAt.endBurialDepth.toFixed(2) + 'm'
    } else {
      popForm.endBurialDepth = lineAt.endBurialDepth
    }
    if (lineAt.startInvertElevation != null) {
      popForm.startInvertElevation =
        lineAt.startInvertElevation.toFixed(2) + 'm'
    } else {
      popForm.startInvertElevation = lineAt.startInvertElevation
    }
    if (lineAt.endInvertElevation != null) {
      popForm.endInvertElevation = lineAt.endInvertElevation.toFixed(2) + 'm'
    } else {
      popForm.endInvertElevation = lineAt.endInvertElevation
    }
    popForm.pipeType = lineAt.pipeType
    popForm.location = lineAt.location
    popForm.probeUnit = lineAt.probeUnit
    popForm.probeDate = lineAt.probeDate
    popForm.ascription = lineAt.ascription
    popForm.burialType = lineAt.burialType
    popForm.flowDirection = lineAt.flowDirection
    popForm.buildYear = lineAt.buildYear
    popForm.isUnderPressure = lineAt.isUnderPressure
    popForm.remark = lineAt.remark
    popForm.tag = lineAt.tag
    /* 分割线 */
    const str = lineAt.startId + '-' + lineAt.endId
    getJCTC(str).then((res) => {
      const obj = res.data[0]
      console.log('空间查询检测信息', obj)
      if (obj.testingPhoto != null) {
        picColor.value = {
          changeColorA: true,
          changeColorB: false,
        }
        str2 = str
      } else {
        console.log('暂无检测图片')
        picColor.value = {
          changeColorA: false,
          changeColorB: true,
        }
      }
      if (obj.testingReport != null) {
        reportColor.value = {
          changeColorA: true,
          changeColorB: false,
        }
        str2 = str
      } else {
        console.log('暂无检测报告')
        reportColor.value = {
          changeColorA: false,
          changeColorB: true,
        }
      }
      if (obj.testingVideo != null) {
        videoColor.value = {
          changeColorA: true,
          changeColorB: false,
        }
        str2 = str
      } else {
        console.log('暂无检测视频')
        videoColor.value = {
          changeColorA: false,
          changeColorB: true,
        }
      }
    })
  }
})
const testPop = ref(true)
const testPopPoint = ref(true)
// 关闭弹窗的方法(线)
const closePopup = () => {
  overlay.setPosition(undefined) // setPosition 传入undefined会隐藏弹窗元素
  currentCoordinate.value = ''
  map.removeInteraction(selectClick)
  testPop.value = false
  PointXsource.clear()
  PointYsource.clear()
}
// 关闭弹窗的方法(点)
const closePopupPoint = () => {
  overlayPoint.setPosition(undefined)
  currentCoordinatePoint.value = ''
  const obj = selectClick.getFeatures().array_[0]
  console.log('获取交互', obj)
  selectClick.getFeatures().clear()
  // selectClick.getFeatures().removeFeature(obj)
}
watch(testPop, () => {
  map.addInteraction(selectClick)
  testPop.value = true
  console.log('线')
})

onBeforeMount(() => {
  emitter.off('changeMap')
})
// 加载管网信息
const initCube = () => {
  let url_ys = `mapApi`
  axios.post(url_ys, params).then((res) => {
    const cubeData = res.data.features
    const arr1 = []
    cubeData.forEach((value) => {
      arr1.push(value.geometry)
    })
    const arr2 = []
    arr1.forEach((value) => {
      arr2.push(value.paths)
    })
    const arr3 = []
    arr2.forEach((value) => {
      arr3.push(value[0])
    })
    bufferArr.value = arr3
    const arr4 = []
    cubeData.forEach((value) => {
      arr4.push(value.attributes)
    })
    // console.log('属性数据', arr4)
    // 循环数组遍历线要素// 创建空图层存储线要素信息
    const gwsource = new VectorSource({
      wrapX: false,
    })
    for (let i = 0; i < arr3.length; i++) {
      const line = new Feature({
        geometry: new LineString([arr3[i][0], arr3[i][1]]),
        attributes: arr4[i],
      })
      gwsource.addFeature(line)
    }
    const testLayer = new VectorLayer({
      source: gwsource,
      style: new Style({
        stroke: new Stroke({
          color: [255, 0, 0, 1],
          width: 10,
        }),
      }),
    })
    map.addLayer(testLayer)
  })
}
let selectClick
const XFpic = ref()
const XFpicOnly = ref()
const XFreport = ref()
const XFvideo = ref()

const initMapHandle = () => {
  selectClick = new Select()
  map.addInteraction(selectClick)
  // 调用点击事件
  allClick()
}
// 截取字符串(0截取前面,1截取后面)
const getCaption = (obj, state) => {
  var index = obj.indexOf('\/', 0)
  if (state == 0) {
    obj = obj.substring(0, index)
  } else {
    obj = obj.substring(index + 1, obj.length)
  }
  return obj
}
// 注册点击
// 改变三种点击样式
const picColor = ref({
  changeColorA: true,
  changeColorB: false,
})
const reportColor = ref({
  changeColorA: true,
  changeColorB: false,
})
const videoColor = ref({
  changeColorA: true,
  changeColorB: false,
})
let str2
const allClick = () => {
  selectClick.on('select', async function (e) {
    if (e.target.getFeatures().getArray()[0] != undefined) {
      const JudgeFeature = e.target
        .getFeatures()
        .getArray()[0]
        .getGeometry()
        .getType()
      const Judgelayer = e.selected[0].get('layerName')
      console.log('判断选择图层', Judgelayer)
      /* 分割线 */
      if (
        Judgelayer == 'detectLayer' ||
        Judgelayer == 'repairLayer' ||
        Judgelayer == 'SGLayer' ||
        Judgelayer == 'QLineLayer'
      ) {
        if (JudgeFeature == 'LineString') {
          if (currentCoordinate.value || currentCoordinatePoint.value) {
            currentCoordinatePoint.value = ''
            overlayPoint.setPosition(undefined)
            currentCoordinate.value = ''
            overlay.setPosition(undefined)
          }
          currentCoordinate.value = e.mapBrowserEvent.coordinate // 保存坐标点位
          overlay.setPosition(e.mapBrowserEvent.coordinate) // 设置覆盖物出现的位置
          console.log('线要素信息', e.selected[0].get('attributes'))
          const popValue = e.selected[0].get('attributes')
          TCFeatId.value = `${popValue[0]}-${popValue[1]}`
          popValueFeat.value = popValue
          // const PointAXValue = e.selected[0].get('PointAX')
          // const PointXValue = e.selected[0].get('PointX')
          // popForm.startId = popValue[0]
          // popForm.endId = popValue[1]
          const str = `${popValue[0]}-${popValue[1]}`
          str2 = e.selected[0].get('attributes2')
          console.log(str)
          // 先进探测
          getPipeInfo(str).then((res) => {
            // 再进修复
            if (res.data.length == 0) {
              getXFSearch(str2).then((res) => {
                // 最后进检测
                if (res.data.length == 0) {
                  console.log('探测修复为空,进检测', str2)
                  var time = new Date()
                  var day = ('0' + time.getDate()).slice(-2)
                  var month = ('0' + (time.getMonth() + 1)).slice(-2)
                  var today = time.getFullYear() + '-' + month + '-' + day
                  getJCTC(str2).then((res) => {
                    console.log('该线要素检测信息', res.data)
                    // 菜单头
                    detailForm.pic = '检测图片'
                    detailForm.report = '检测报告'
                    detailForm.video = '检测视频'
                    // 菜单键
                    popFormName.material = '检测对象'
                    popFormName.caliber = '缺陷类型'
                    popFormName.spec = '缺陷等级'
                    popFormName.startBurialDepth = '缺陷位置'
                    popFormName.endBurialDepth = '缺陷级别'
                    popFormName.startInvertElevation = '管网材质'
                    popFormName.endInvertElevation = '路面类型'
                    popFormName.pipeType = '道路名称'
                    popFormName.location = '检测时间'
                    popFormName.probeUnit = '检测人员'
                    popFormName.probeDate = '检测公司'
                    popFormName.ascription = '备注'
                    popFormName.burialType = '检测长度'
                    popFormName.flowDirection = '审核状态'
                    popFormName.buildYear = '审核人'
                    popFormName.isUnderPressure = '检测部门'
                    popFormName.remark = '工程编码'
                    popFormName.tag = '所在区镇'
                    // 菜单值
                    const popValuePlus = res.data[0]
                    if (popValuePlus.testingPhoto != null) {
                      picColor.value = {
                        changeColorA: true,
                        changeColorB: false,
                      }
                    } else {
                      console.log('暂无检测图片')
                      picColor.value = {
                        changeColorA: false,
                        changeColorB: true,
                      }
                    }
                    if (popValuePlus.testingReport != null) {
                      reportColor.value = {
                        changeColorA: true,
                        changeColorB: false,
                      }
                    } else {
                      console.log('暂无检测报告')
                      reportColor.value = {
                        changeColorA: false,
                        changeColorB: true,
                      }
                    }
                    if (popValuePlus.testingVideo != null) {
                      videoColor.value = {
                        changeColorA: true,
                        changeColorB: false,
                      }
                    } else {
                      console.log('暂无检测视频')
                      videoColor.value = {
                        changeColorA: false,
                        changeColorB: true,
                      }
                    }

                    popForm.startId = popValuePlus.startId
                    popForm.endId = popValuePlus.endId
                    popForm.material = popValuePlus.detectionTarget
                    popForm.caliber = popValuePlus.defectType
                    popForm.spec = popValuePlus.defectLevel
                    popForm.startBurialDepth = popValuePlus.defectPosition
                    if (popValuePlus.defectLevel == null) {
                      popForm.endBurialDepth = ''
                    } else {
                      popForm.endBurialDepth = popValuePlus.defectLevel
                    }
                    // console.log('弹窗值', popForm.endBurialDepth)
                    popForm.startInvertElevation =
                      popValuePlus.pipeSegmentMaterial
                    popForm.endInvertElevation = popValuePlus.pavementType
                    popForm.pipeType = popValuePlus.testingAddress
                    popForm.location = popValuePlus.testingDate
                    popForm.probeUnit = popValuePlus.testingName
                    popForm.probeDate = popValuePlus.testingCompany2
                    popForm.ascription = popValuePlus.remarks
                    // 管段长度约到小数点后两位
                    if (popValuePlus.testingLength != null) {
                      popForm.burialType = parseInt(
                        popValuePlus.testingLength
                      ).toFixed(2)
                    } else {
                      popForm.burialType = popValuePlus.testingLength
                    }
                    // popForm.burialType = popValuePlus.testingLength
                    popForm.flowDirection = popValuePlus.status
                    popForm.buildYear = popValuePlus.checkName
                    popForm.isUnderPressure = popValuePlus.testingCompany
                    popForm.remark = popValuePlus.eid
                    popForm.tag = popValuePlus.region
                  })
                } else {
                  console.log('探测为空,进修复', res.data)
                  const popValuePlus = res.data[0]
                  if (popValuePlus.handlePhoto != null) {
                    picColor.value = {
                      changeColorA: true,
                      changeColorB: false,
                    }
                  } else {
                    console.log('暂无修复图片')
                    picColor.value = {
                      changeColorA: false,
                      changeColorB: true,
                    }
                  }
                  if (popValuePlus.handleReport != null) {
                    reportColor.value = {
                      changeColorA: true,
                      changeColorB: false,
                    }
                  } else {
                    console.log('暂无修复报告')
                    reportColor.value = {
                      changeColorA: false,
                      changeColorB: true,
                    }
                  }
                  if (popValuePlus.handleVideo != null) {
                    videoColor.value = {
                      changeColorA: true,
                      changeColorB: false,
                    }
                  } else {
                    console.log('暂无修复视频')
                    videoColor.value = {
                      changeColorA: false,
                      changeColorB: true,
                    }
                  }
                  // 菜单头
                  detailForm.pic = '修复图片'
                  detailForm.report = '修复报告'
                  detailForm.video = '修复视频'
                  // 菜单头地址
                  XFpicOnly.value = popValuePlus.handlePhoto
                  originalUrl.value = popValuePlus.path + popValuePlus.eid + '/'
                  XFpic.value =
                    popValuePlus.path +
                    popValuePlus.eid +
                    '/' +
                    popValuePlus.handlePhoto
                  XFreport.value =
                    popValuePlus.path +
                    popValuePlus.eid +
                    '/' +
                    popValuePlus.handleReport
                  XFvideo.value = popValuePlus.handleVideo
                  // 菜单键
                  popFormName.material = '处理对象'
                  popFormName.caliber = '处理类型'
                  popFormName.spec = '缺陷名称'
                  popFormName.startBurialDepth = '缺陷位置'
                  popFormName.endBurialDepth = '缺陷级别'
                  popFormName.startInvertElevation = '处理日期'
                  popFormName.endInvertElevation = '处理长度'
                  popFormName.pipeType = '管段长度'
                  popFormName.location = '处理方式'
                  popFormName.probeUnit = '处理内容'
                  popFormName.probeDate = '处理单位'
                  popFormName.ascription = '所在位置'
                  popFormName.burialType = '所属区镇'
                  popFormName.flowDirection = '校验结果'
                  popFormName.buildYear = '备注'
                  popFormName.isUnderPressure = '归属类型'
                  popFormName.remark = '工程编码'
                  popFormName.tag = '复核人员'
                  // 菜单值
                  popForm.startId = popValuePlus.startId
                  popForm.endId = popValuePlus.endId
                  popForm.material = popValuePlus.handleTarget
                  popForm.caliber = popValuePlus.handleType
                  popForm.spec = popValuePlus.defectName
                  popForm.startBurialDepth = popValuePlus.defectPosition
                  if (popValuePlus.defectLevel == null) {
                    popForm.endBurialDepth = ''
                  } else {
                    popForm.endBurialDepth = popValuePlus.defectLevel
                  }
                  popForm.startInvertElevation = popValuePlus.handleTime
                  popForm.endInvertElevation = popValuePlus.handleLength
                  // 管段长度约到小数点后两位
                  if (popValuePlus.pipeSection != null) {
                    popForm.pipeType = parseInt(
                      popValuePlus.pipeSection
                    ).toFixed(2)
                  } else {
                    popForm.pipeType = popValuePlus.pipeSection
                  }
                  // popForm.pipeType = popValuePlus.pipeSection
                  popForm.location = popValuePlus.handleMode
                  popForm.probeUnit = popValuePlus.handleContent
                  popForm.probeDate = popValuePlus.handleCompany
                  popForm.ascription = popValuePlus.location
                  popForm.burialType = popValuePlus.districtTown
                  popForm.flowDirection = popValuePlus.verificationResult
                  popForm.buildYear = popValuePlus.res
                  popForm.isUnderPressure = popValuePlus.type
                  popForm.remark = popValuePlus.eid
                  popForm.tag = popValuePlus.checkPerson
                }
              })
            } else {
              getJCTC(str).then((res) => {
                console.log('进入探测挂接', res)
                if (res.data.length == 0) {
                  console.log('探测未挂检测')
                  picColor.value = {
                    changeColorA: false,
                    changeColorB: true,
                  }
                  reportColor.value = {
                    changeColorA: false,
                    changeColorB: true,
                  }
                  videoColor.value = {
                    changeColorA: false,
                    changeColorB: true,
                  }
                } else if (res.data[0].testingPhoto == null) {
                  picColor.value = {
                    changeColorA: false,
                    changeColorB: true,
                  }
                } else if (res.data[0].testingReport == null) {
                  reportColor.value = {
                    changeColorA: false,
                    changeColorB: true,
                  }
                } else if (res.data[0].testingVideo == null) {
                  videoColor.value = {
                    changeColorA: false,
                    changeColorB: true,
                  }
                }
              })
              const popValuePlus = res.data[0]
              popForm.startId = popValuePlus.startId
              popForm.endId = popValuePlus.endId
              popForm.material = popValuePlus.material
              popForm.caliber = popValuePlus.caliber
              popForm.spec = popValuePlus.spec
              if (popValuePlus.startBurialDepth != null) {
                popForm.startBurialDepth =
                  popValuePlus.startBurialDepth.toFixed(2) + 'm'
              } else {
                popForm.startBurialDepth = popValuePlus.startBurialDepth
              }
              if (popValuePlus.endBurialDepth != null) {
                popForm.endBurialDepth =
                  popValuePlus.endBurialDepth.toFixed(2) + 'm'
              } else {
                popForm.endBurialDepth = popValuePlus.endBurialDepth
              }
              if (popValuePlus.startInvertElevation != null) {
                popForm.startInvertElevation =
                  popValuePlus.startInvertElevation.toFixed(2) + 'm'
              } else {
                popForm.startInvertElevation = popValuePlus.startInvertElevation
              }
              if (popValuePlus.endInvertElevation != null) {
                popForm.endInvertElevation =
                  popValuePlus.endInvertElevation.toFixed(2) + 'm'
              } else {
                popForm.endInvertElevation = popValuePlus.endInvertElevation
              }
              // 菜单头
              detailForm.pic = '检测图片'
              detailForm.report = '检测报告'
              detailForm.video = '检测视频'
              popForm.pipeType = popValuePlus.pipeType
              popForm.location = popValuePlus.location
              popForm.probeUnit = popValuePlus.probeUnit
              popForm.probeDate = popValuePlus.probeDate
              popForm.ascription = popValuePlus.ascription
              popForm.burialType = popValuePlus.burialType
              popForm.flowDirection = popValuePlus.flowDirection
              popForm.buildYear = popValuePlus.buildYear
              popForm.isUnderPressure = popValuePlus.isUnderPressure
              popForm.remark = popValuePlus.remark
              popForm.tag = popValuePlus.tag
            }
          })
          // 以下为缓冲区方法
          const bufferValue = e.selected[0].get('geometry').flatCoordinates
          // console.log('缓冲区捕获', bufferValue, [
          //   [bufferValue[0], bufferValue[1]],
          //   [bufferValue[2], bufferValue[3]],
          // ])
          olBuffer = new Feature({
            geometry: new LineString([
              [bufferValue[0], bufferValue[1]],
              [bufferValue[2], bufferValue[3]],
            ]),
          })
          if (olBuffer.getGeometry() != null) {
            buffersource.clear()
          }
          buffersource.addFeature(olBuffer)

          // const list = bufferValue //分成两个坐标组
          // const middleIndex = Math.ceil(list.length / 2)
          // const firstHalf = list.splice(0, middleIndex)
          // const secondHalf = list.splice(-middleIndex)
          // const co = [firstHalf, secondHalf]
          // console.log(co)
          // let arr = co.map((item) => {
          //   return transform(item, 'EPSG:KSZB', 'EPSG:4326')
          // })
          // const lineString = turf.lineString(arr)
          // //0.1米=0.00006214 英里
          // //0.5米=0.0003107 英里
          // const buffer = turf.buffer(lineString, 0.0003107, { units: 'miles' })
          // let buffered = buffer.geometry.coordinates[0]
          // let testarr = buffered.map((item) => {
          //   return transform(item, 'EPSG:4326', 'EPSG:KSZB')
          // })
          // olBuffer = new Feature({
          //   type: 'Polygon',
          //   geometry: new Polygon([testarr]),
          //  geometry:new LineString([arr1, arr2]),
          // })
          // if (olBuffer.getGeometry() != null) {
          //   buffersource.clear()
          // }
          // buffersource.addFeature(olBuffer)
        } else if (JudgeFeature == 'Point') {
          if (currentCoordinate.value || currentCoordinatePoint.value) {
            currentCoordinatePoint.value = ''
            overlayPoint.setPosition(undefined)
            currentCoordinate.value = ''
            overlay.setPosition(undefined)
          }
          if (e.selected[0].get('attributes')) {
            const popValuePoint = e.selected[0].get('attributes')
            console.log('点要素信息', popValuePoint)
            getPipePointInfo(popValuePoint).then((res) => {
              console.log(res.data[0])
              const PointArr = res.data[0]
              if (PointArr) {
                popFormPoint.featId = PointArr.featId
                popFormPoint.x = PointArr.x
                popFormPoint.y = PointArr.y
                popFormPoint.type = PointArr.type
                if (PointArr.groundElevation != null) {
                  popFormPoint.groundElevation =
                    PointArr.groundElevation.toFixed(2) + 'm'
                  console.log(popFormPoint.groundElevation)
                } else {
                  popFormPoint.groundElevation = PointArr.groundElevation
                }

                if (PointArr.caliber != null) {
                  popFormPoint.caliber = PointArr.caliber.toFixed(2) + 'm'
                } else {
                  popFormPoint.caliber = PointArr.caliber
                }

                if (PointArr.manholeDepth != null) {
                  popFormPoint.manholeDepth =
                    PointArr.manholeDepth.toFixed(2) + 'm'
                } else {
                  popFormPoint.manholeDepth = PointArr.manholeDepth
                }

                if (PointArr.burialDepth != null) {
                  popFormPoint.burialDepth =
                    PointArr.burialDepth.toFixed(2) + 'm'
                } else {
                  popFormPoint.burialDepth = PointArr.burialDepth
                }

                popFormPoint.spec = PointArr.spec
                popFormPoint.manholeCoverMaterial =
                  PointArr.manholeCoverMaterial
                popFormPoint.manholeCoverShape = PointArr.manholeCoverShape
                popFormPoint.manholeCoverSize = PointArr.manholeCoverSize
                popFormPoint.probeUnit = PointArr.probeUnit
                popFormPoint.probeDate = PointArr.probeDate
                popFormPoint.location = PointArr.location
                popFormPoint.ascription = PointArr.ascription
                popFormPoint.remark = PointArr.remark
                popFormPoint.tag = PointArr.tag
              }
            })
            currentCoordinatePoint.value = e.mapBrowserEvent.coordinate // 保存坐标点位
            overlayPoint.setPosition(e.mapBrowserEvent.coordinate) // 设置覆盖物出现的位置
          }
        } else {
          console.log('错误')
        }
      } else {
        console.log('未进入探测检测修复专题')
      }
      /* 分割线 */
    }
  })
}
// 测试监听鼠标滚动打印当前比例尺
const WatchScrolling = () => {
  map.on('moveend', (e) => {
    testScale()
  })
}

const testScale = () => {
  // 监听分辨率变化，通过dpi和像素关系（比例尺=dpi/0.0254*分辨率）输出比例尺
  map.getView().on('change:resolution', function () {
    //默认dpi
    const DEFAULT_DPI = 25.4 / 0.28
    //每米多少英寸
    const inchesPerMeter = 1000 / 25.4
    const currentScale =
      map.getView().getResolution() * inchesPerMeter * DEFAULT_DPI
    mapScale.value = Math.round(currentScale)
      .toLocaleString()
      .replaceAll(',', '')
  })
}
const WatchScale = async () => {
  if (mapScale.value >= 200000) {
    Level.value = 1500
    const extent = map.getView().calculateExtent(map.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    // console.log('测试1', extent)
  } else if (200000 > mapScale.value && mapScale.value >= 80000) {
    const extent = map.getView().calculateExtent(map.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 1000
    // console.log('测试2', extent)
  } else if (80000 > mapScale.value && mapScale.value >= 20000) {
    const extent = map.getView().calculateExtent(map.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 600
  } else if (20000 > mapScale.value && mapScale.value >= 5500) {
    const extent = map.getView().calculateExtent(map.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 300
  } else if (5500 > mapScale.value) {
    const extent = map.getView().calculateExtent(map.getSize())
    leftTopX.value = extent[0]
    leftTopY.value = extent[3]
    rightBottomX.value = extent[1]
    rightBottomY.value = extent[2]
    Level.value = 0
  } else {
    console.log('错误', mapScale.value)
    // console.log(isNaN(mapScale.value))
  }
}
// watch(
//   mapScale,
//   debounce((v1, v2) => {
//     WatchScale()
//   }, 800)
// )
// 当鼠标滚动后调用反复服务

// watch(
//   leftTopX,
//   debounce(() => {
//     initCubeServer()
//     console.log('分辨率打印', map.getView().getResolution())
//   }, 800)
// )

/* 动态样式数据 */
const font = ref('15px A_QiChengINFO')
const fill = ref('rgba(0, 91, 230,1)')
const stColor = ref('rgba(22, 92, 177,1)')
const width = ref(1.5)
const pointAttr = ref()
const pointElseAttr = ref()

// 线要素的三个弹窗
const demo1 = reactive({
  value6: false,
  value7: false,
  value8: false,
  value300: '',
})
const originalUrl = ref()
const images = ref([])
const bannerHeight = ref(200)
const testPhotoUrl = ref()
const testVideoUrl = ref()
const testReportUrl = ref()
const TCFeatId = ref()
const single = ref(true)
const poly = ref(false)

//展开图片--判断多张轮播图
const picX = ref('')
const openPic = () => {
  demo1.value6 = true
  // 图片视频报告路径来源
  console.log('路径来源ID', TCFeatId.value)
  var time = new Date()
  var day = ('0' + time.getDate()).slice(-2)
  var month = ('0' + (time.getMonth() + 1)).slice(-2)
  var today = time.getFullYear() + '-' + month + '-' + day
  if (detailForm.pic == '检测图片') {
    // console.log(detailForm.pic)
    // 检测
    getJCTC(str2).then((res) => {
      console.log('检测挂探测', res)
      if (res.data.length >= 1) {
        console.log(res.data.length)
        // 如果成功返回,则显示图片
        const arr = res.data[0]
        if (arr.testingPhoto != null) {
          if (arr.testingPhoto.indexOf('JPG') == -1) {
            picX.value = arr.testingPhoto
          } else {
            var testingPhoto = arr.testingPhoto.replace(/JPG/g, 'jpg')
            picX.value = testingPhoto
          }
          if (arr.testingPhoto.includes('/') == false) {
            single.value = true
            poly.value = false
            testPhotoUrl.value = arr.path + arr.eid + '/' + picX.value
            console.log('单张图片', testPhotoUrl.value)
          } else if (arr.testingPhoto.includes('/') == true) {
            originalUrl.value = arr.path + arr.eid + '/'
            single.value = false
            const a2 = picX.value.split('/')

            const a22 = []
            for (let i = 0; i < a2.length; i++) {
              const obj = { id: i, pic: a2[i], originalUrl: originalUrl.value }
              a22.push(obj)
            }
            images.value = a22
            console.log('多张图片', a22)
            poly.value = true
          } else {
            testPhotoUrl.value = 'https://temp.im/200x200'
          }
        } else {
          // 否则显示404
          testPhotoUrl.value = 'https://temp.im/200x200'
        }
      } else {
        // 否则显示404
        testPhotoUrl.value = 'https://temp.im/200x200'
      }
    })
  } else if (detailForm.pic == '修复图片') {
    console.log(detailForm.pic, XFpicOnly.value)
    if (XFpicOnly.value.includes('/') == false) {
      single.value = true
      poly.value = false
      testPhotoUrl.value = XFpic.value
      console.log('修复单张', testPhotoUrl.value)
    } else if (XFpicOnly.value.includes('/') == true) {
      single.value = false
      const a2 = XFpicOnly.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { id: i, pic: a2[i], originalUrl: originalUrl.value }
        a22.push(obj)
      }
      images.value = a22
      console.log('多张图片', originalUrl.value)
      poly.value = true
    } else {
      testPhotoUrl.value = 'https://temp.im/200x200'
    }
  } else {
    testPhotoUrl.value = 'https://temp.im/200x200'
  }
}
// 展开报告
const openReport = () => {
  demo1.value7 = true
  console.log('路径来源ID', TCFeatId.value)
  var time = new Date()
  var day = ('0' + time.getDate()).slice(-2)
  var month = ('0' + (time.getMonth() + 1)).slice(-2)
  var today = time.getFullYear() + '-' + month + '-' + day
  if (detailForm.report == '检测报告') {
    getJCTC(str2).then((res) => {
      console.log(res)
      if (res.data.length != 0) {
        const arr = res.data[0]
        if (arr.testingReport.indexOf('PDF') == -1) {
          testReportUrl.value = arr.path + arr.eid + '/' + arr.testingReport
          console.log('检测挂探测报告', testReportUrl.value)
        } else {
          var testingReport = arr.testingReport.replace(/PDF/g, 'pdf')
          testReportUrl.value = arr.path + arr.eid + '/' + testingReport
          console.log('检测挂探测报告', testReportUrl.value)
        }
      } else {
        testReportUrl.value = 'https://temp.im/400x400'
      }
    })
  } else if (detailForm.report == '修复报告') {
    testReportUrl.value = XFreport.value
  } else {
    testReportUrl.value = 'https://temp.im/400x400'
  }
}
// 展开视频
const movieValue = ref('')
const movieOptions = ref([])
const openVideo = () => {
  demo1.value8 = true
  console.log('路径来源ID', TCFeatId.value)
  var time = new Date()
  var day = ('0' + time.getDate()).slice(-2)
  var month = ('0' + (time.getMonth() + 1)).slice(-2)
  var today = time.getFullYear() + '-' + month + '-' + day
  if (detailForm.video == '检测视频') {
    getJCTC(str2).then((res) => {
      if (res.data.length != 0) {
        console.log(res.data[0])
        const arr = res.data[0]
        // testVideoUrl.value = arr.path + arr.eid + '/' + arr.testingVideo
        if (arr.testingVideo.includes('/') == false) {
          testVideoUrl.value = arr.path + arr.eid + '/'
          const before = arr.testingVideo.split('.')[0]
          const mp4 = before + '.mp4'
          testVideoUrl.value = testVideoUrl.value + mp4
          console.log('单个视频', testVideoUrl.value)
        } else if (arr.testingVideo.includes('/') == true) {
          originalUrl.value = arr.path + arr.eid + '/'
          const a2 = arr.testingVideo.split('/')
          const a22 = []
          for (let i = 0; i < a2.length; i++) {
            const obj = { value: a2[i], label: a2[i] }
            a22.push(obj)
          }
          movieOptions.value = a22
          // 默认加载第一个视频
          testVideoUrl.value = originalUrl.value + a2[0]
          console.log('多个视频', movieOptions.value)
        } else {
          console.log('无权限视频')
        }
        console.log('检测挂探测视频', testVideoUrl.value)
      } else {
        testVideoUrl.value = 'https://temp.im/400x400'
      }
    })
  } else if (detailForm.video == '修复视频') {
    if (XFvideo.value.includes('/') == false) {
      testVideoUrl.value = originalUrl.value + XFvideo.value
      console.log('单个视频', XFvideo.value)
    } else if (XFvideo.value.includes('/') == true) {
      const a2 = XFvideo.value.split('/')
      const a22 = []
      for (let i = 0; i < a2.length; i++) {
        const obj = { value: a2[i], label: a2[i] }
        a22.push(obj)
      }
      movieOptions.value = a22
      // 默认加载第一个视频
      testVideoUrl.value = originalUrl.value + a2[0]
      console.log('多个视频', movieOptions.value)
    } else {
      console.log('无权限视频')
    }
  } else {
    testVideoUrl.value = 'https://temp.im/200x200'
  }
}
// 关闭视频
const handleVideoX = () => {
  var myVideo = document.getElementById('video1')
  if (myVideo.paused) {
    myVideo.play()
  } else {
    myVideo.pause()
  }
}
// 切换视频列表
const movieChange = (val) => {
  console.log(val)
  testVideoUrl.value = originalUrl.value + val
}
</script>

<style lang="less" scoped>
/* 使用iconfont 字体 */
// @font-face {
//   font-family: 'iconfont';
//   src: url('@/assets/fonts/iconfont.eot');
//   src: url('@/assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
//     url('@/assets/fonts/iconfont.woff') format('woff'),
//     url('@/assets/fonts/iconfont.ttf') format('truetype'),
//     url('@/assets/fonts/iconfont.svg#iconfont') format('svg');
// }
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
/* td 菜单键 */
.td {
  width: 73px;
}

// 轮播图
.bannerimg {
  width: 100%;
  height: 400px;
}
.poly {
  :deep(.el-carousel__indicator--horizontal .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 50%;
    opacity: 0.5;
  }
  :deep(.el-carousel__indicator--horizontal.is-active .el-carousel__button) {
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 1;
  }
  :deep(.el-carousel__container) {
    height: 400px;
  }
}
/*
    img 外侧盒子
*/
.guild_img_box {
  position: relative;
  width: 600px;
  height: 400px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}
.guild_img_box > img {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  width: auto;
  height: auto;
}
.testReport {
  position: relative;
  width: 900px;
  height: 500px;
  margin: 0 auto;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%),
    0 1px 10px 0 rgb(0 0 0 / 12%) !important;
  border: 1px solid #e9e9e9;
  overflow: hidden;
}

.testReport > iframe {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  max-width: 100%;
  max-height: 100%;
}
/* 线弹窗表头 */
.first_line {
  padding: 0 5px;
  height: 20px;
  width: 295px;
  line-height: 15px;
  font-size: 13px;
  border-bottom: 2px solid #80eeff;
}
.second_line {
  margin-top: 4px;
  margin-bottom: 3px;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  padding: 0;
  justify-content: start;
  display: flex;
}
.second_line > div {
  // cursor: pointer;
  // border-bottom: 1px solid #80eeff;
  margin-right: 20px;
  width: 50px;
}
.changeColorA {
  cursor: pointer;
  border-bottom: 1px solid #80eeff;
}
.changeColorB {
  cursor: auto;
  border-bottom: 1px solid #999;
  color: #999;
  pointer-events: none;
}
.dotted_line {
  padding-bottom: 1px;
  border-bottom: 1.5px dotted #80eeff;
  width: 295px;
}
/* 线弹窗的图片视频报告弹窗头 */
.picPop {
  :deep(.vxe-modal--wrapper .vxe-modal--header) {
    background: #2a88e1 !important;
    color: #fff;
  }
  :deep(.vxe-modal--header-right) {
    transform: translateY(6%);
    font-size: 18px;
  }

  :deep(.vxe-modal--wrapper.type--modal .vxe-modal--body .vxe-modal--content) {
    overflow: hidden;
  }
}
.table_html {
  :deep(table) {
    border-collapse: separate;
  }
}
/* 弹窗相关 */
.buffer {
  position: absolute;
  top: 30%;
  font-size: 11px;
  width: 300px;
}
.bufferPoint {
  position: absolute;
  top: 30%;
  font-size: 11px;
  width: 300px;
}
/* 线弹窗 */
.contentPane {
  background-color: #0a163cc9;
  border-radius: 5px;
  padding: 5px 0px 5px 9px;
  color: #80eeff;
  width: 312px;
  max-height: 400px;
}
.buffer {
  .list_box {
    max-height: 350px;
    overflow: scroll;
    width: 300px;
  }
  // 自定义滚动条
  :deep(.list_box) {
    scrollbar-color: #5385b1 #0a163cc9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  /* 以下是chrome浏览器自定义滚动条样式方式 */
  :deep(.list_box::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
  }
  // 解决XY滚动条右下角白框
  :deep(.list_box::-webkit-scrollbar-corner) {
    background: rgba(0, 0, 0, 0);
  }
  :deep(.list_box::-webkit-scrollbar-thumb) {
    background-color: #5385b1;
    border-radius: 5px;
  }
}
.bufferPoint {
  .list_box {
    max-height: 350px;
    overflow: scroll;
    width: 300px;
  }
  :deep(.list_box) {
    scrollbar-color: #5385b1 #0a163cc9; /* 第一个方块颜色，第二个轨道颜色(用于更改火狐浏览器样式) */
    scrollbar-width: thin; /* 火狐滚动条无法自定义宽度，只能通过此属性使滚动条宽度变细 */
    -ms-overflow-style: none; /* 隐藏滚动条（在IE和Edge两个浏览器中很难更改样式，固采取隐藏方式） */
  }
  :deep(.list_box::-webkit-scrollbar) {
    width: 5px;
    height: 4px; // 纵向滚动条 必写
  }
  :deep(.list_box::-webkit-scrollbar-corner) {
    background: rgba(0, 0, 0, 0);
  }
  :deep(.list_box::-webkit-scrollbar-thumb) {
    background-color: #5385b1;
    border-radius: 5px;
  }
}
/* 点弹窗 */
.contentPanePoint {
  background-color: #0a163cc9;
  border-radius: 5px;
  padding: 5px 0px 5px 9px;
  color: #80eeff;
  width: 312px;
  max-height: 380px;
}
.titleButton.close {
  // margin-top: 5px;
  margin-right: 7px;
  width: 15px;
  height: 15px;
  font-size: 20px;
  background: #ea4f70;
  border: 1px solid #fffbdf;
  line-height: 9px;
  color: white;
  border-radius: 2px;
}
.titleButton {
  position: absolute;
  top: 4px;
  cursor: pointer;
  right: -15px;
}
/* 整体地图容器相关 */
/*  */
.Flyto {
  position: absolute;
  top: 300px;
  left: 180px;
}
#scaleWrapper {
  position: absolute;
  top: 300px;
  left: 180px;
  z-index: 9999;
  color: black;
}

/* 地图底图 */
.map__x {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
/* 卷帘 */
#line {
  width: 8px;
  height: 100%;
  position: absolute;
  top: 0;
  left: calc(50% - 5px);
  background-color: white;
  border: 1px solid #eee;
  z-index: 2;
  cursor: pointer;
}
.img_x {
  width: 0vw;
  height: 0vh;
}
.coordinate {
  position: absolute;
  bottom: 18px;
  left: 158px;
}
</style>
